<template>
  <!-- 概览部分 -->
  <div class="top-wrap">
    <!-- 第一行 -->
    <div class="first">
      <dv-decoration-10 class="f-left" :color="['#568aea', 'rgba(0, 194, 255, 0.3)']" />
      <div class="f-center">
        <dv-decoration-8 class="f-center-1" :color="['#568aea', '#000000']" />
        <div class="title">
          <span class="title-text">数据可视化大屏模板</span>
          <dv-decoration-6 class="f-center-0" :reverse="true" :color="['#50e3c2', '#67a1e5']" />
        </div>
        <dv-decoration-8 class="f-center-2" :reverse="true" :color="['#568aea', '#000000']" />
      </div>
      <dv-decoration-10 class="f-right" :color="['#568aea', 'rgba(0, 194, 255, 0.3)']" />
    </div>

    <!-- 第二行 -->
    <div class="second">
      <div class="s1">
        <div class="react-left1">
          <router-link to="monitor">首页</router-link>
        </div>
        <div class="react-left2">
          <router-link to="monitor1">页面1</router-link>
          <router-link to="monitor2">应激反应测试</router-link>
        </div>
      </div>
      <div class="s2">
        <div class="react-right1">
          <span class="text">vue-big-starter</span>
        </div>
        <div class="react-right2">
          <span class="text">{{ dateTime }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  name: "topbar",
  data() {
    return {
      dateTime: "",
      dateTimeInterval: null,
    };
  },
  mounted() {
    this.calcDateTime();
  },
  beforeDestroy() {
    clearInterval(this.dateTimeInterval);
  },
  filters: {},
  methods: {
    getData() {},
    calcDateTime() {
      this.dateTimeInterval = setInterval(() => {
        this.dateTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.top-wrap {
  // 第一行
  .first {
    display: flex;
    justify-content: center;
    .f-left {
      width: 33.3%;
      height: 5px;
    }
    .f-right {
      width: 33.3%;
      height: 5px;
      transform: rotateY(180deg);
    }
    .f-center {
      display: flex;
      justify-content: center;
      .f-center-1 {
        width: 200px;
        height: 50px;
      }
      .f-center-2 {
        width: 200px;
        height: 50px;
      }
      .title {
        position: relative;
        width: 500px;
        text-align: center;
        background-size: cover;
        background-repeat: no-repeat;

        .title-text {
          font-size: 24px;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translate(-50%);
        }

        .f-center-0 {
          position: absolute;
          bottom: -30px;
          left: 50%;
          width: 250px;
          height: 8px;
          transform: translate(-50%);
        }
      }
    }
  }

  // 第二行
  .second {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    .s1,
    .s2 {
      width: 40%;
      display: flex;
    }
    .react-left1 {
      width: 200px;
      font-size: 18px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      transform: skewX(45deg);
      margin-left: 25px;
      background-color: #24243a;
      &::after {
        content: "";
        width: 50px;
        height: 50px;
        background: #24243a;
        transform: skewX(-45deg);
        position: absolute;
        left: -25px;
        top: 0;
        z-index: -1;
      }
      a {
        color: #eee;
        display: inline-block;
        transform: skewX(-45deg);
        text-decoration: none;
        padding-right: 25px;
      }
    }
    .react-left2 {
      flex-grow: 1;
      font-size: 18px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      transform: skewX(45deg);
      margin-left: 25px;
      background-color: #24243a;
      display: flex;
      justify-content: space-around;
      a {
        color: #eee;
        display: inline-block;
        transform: skewX(-45deg);
        text-decoration: none;
      }
    }

    .react-right1 {
      font-size: 18px;
      width: 300px;
      line-height: 50px;
      text-align: center;
      transform: skewX(-45deg);
      background-color: #1a5cd7;
      margin-right: 20px;
      span {
        display: inline-block;
        transform: skewX(45deg);
      }
    }
    .react-right2 {
      flex-grow: 1;
      font-size: 18px;
      width: 300px;
      line-height: 50px;
      text-align: center;
      transform: skewX(-45deg);
      background-color: #24243a;
      margin-right: 20px;
      position: relative;
      text-align: right;
      &::after {
        content: "";
        width: 50px;
        height: 50px;
        background: #24243a;
        transform: skewX(45deg);
        position: absolute;
        right: -25px;
        top: 0;
        z-index: -1;
      }
      span {
        display: inline-block;
        transform: skewX(45deg);
      }
    }
  }
}
</style>
